<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <ul>
        <!--key表示每个节点的标识-->
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
    <!-- 遍历对象-->
    <ul>
        <!--key表示每个节点的标识-->
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>
    <!--遍历字符串-->
    <ul>
        <!--key表示每个节点的标识-->
        <li v-for="(value,index) of name" :key="k">
            {{index}}-{{value}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;

    new Vue({
        el: "#root",
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
            car: {
                name: '奥迪A8',
                price: '70万',
                color: '黑色'
            },
            name: 'hello'
        }
    });
</script>
</body>
</html>